var VS_SHADER_RESOURCE = 
    "attribute vec4 a_Position;\n" +
    "void main() {\n" +
    "   gl_Position = a_Position;\n" +
    "   gl_PointSize = 10.0;\n" +
    "}\n";
    
var FS_SHADER_RESOURCE = 
    "void main(){ \n" +
    "   gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" +
    "}\n";


function main(){
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if(! gl){
        console.error("get webgl fail");
        return;
    }

    if(! initShaders(gl, VS_SHADER_RESOURCE, FS_SHADER_RESOURCE)){
        console.error("init shader fail");
        return;
    }

    var n = initCacheArea(gl);
    if(n>0)
    {
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINT, 0, n);
    }

}

function initCacheArea(gl){
    var vbuffer = gl.createBuffer(); // 创建缓冲区
    if(! vbuffer){
        console.error("create buffer fail");
        return -1;
    }
    var pointArray = new Float32Array(              // 创建类型数组
        [0.0,0.5, -0.5,-0.5,0.5,-0.5]
    );
    var n = 3;
    var a_Position = gl.getAttribLocation(gl.program, "a_Position"); // 获取顶点属性地址
    gl.bindBuffer(gl.ARRAY_BUFFER ,vbuffer);  // 绑定缓冲区，到顶点缓冲区类型中
    gl.bufferData(gl.ARRAY_BUFFER ,pointArray, gl.STATIC_DRAW); // 给缓冲区赋值
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); // 绑定属性地址到缓冲区中
    gl.enableVertexAttribArray(a_Position); // 开启属性缓冲区
    
    return n;
}